<style>
  .goods-wall{
    width:800px;
  }
  
  .m-fixed{
    position: fixed;
    width:100%;
    
  }
</style>

<div class="header" id="header" style="width: 800px height:0px">
      <div class="m-nav m-fixed" style="width: 800px">
        <div class="  ">
          <ul class="channel clearfix">
            <li>
              <?php echo CHtml::link('最新',array('webgl/facility/','pageNo'=>1,'pageSize'=>4),array( 'class'=>"on"))?>
            </li>
            <li>
              <?php echo CHtml::link('test',array('webgl/build/'))
              ?>
            </li>
            <li>
              <?php echo CHtml::link('我装修',array('webgl/test/'))?>
            </li>
            <li>
              <?php echo CHtml::link('我的房',array('webgl/showHouse/'))?>
            </li>
          </ul>
          
        </div>
      </div>
    </div>

<section id="content">

<div id="container" class="transitions-enabled clearfix">

<?php if($facilities){
  foreach ($facilities as $f)
  { ?>

  <div class=" col1 goods" id="<?php echo $f->id?>" title='<?php echo $f->name?>' gPath='<?php echo $f->geometryPath ?>' gTypeId="<?php echo $f->gTypeId ?>" gDepId="<?php echo $f->dependId ?>">
    <div class="goods-pic" style="height:213px">
      <a href="" title="<?php echo $f->name?>" target="_blank"> <img src="<?php echo $f->thumbPath?>" title="<?php echo $f->name?>" alt="<?php echo $f->name?>" height="213px"> </a>
      <a class="ilike-m" href="javascript:void(0);" data-type="0" data-proid="1138079" style="display: block; ">喜欢</a>
    </div>
    <div class="goods-stat clearfix">
      <span class="like-num">使用: <em class="like-count">1 </em></span>
      <span class="fr ml5">评论: 9</span>
    </div>
    <ul class="comments">

      <li class="bdesc" id="<?php echo $f->id.'bdesc'?>">
        <?php echo  $f->description?>
      </li>
      
    </ul>
  </div>
 
<?php }}?>

</div>
</section>
<script>
    $( function() {

        var $container = $('#container');


          $('.goods').click(function(){
            var goodsGeo={"geometryPath":$(this).attr('gPath'),"gTypeId":$(this).attr('gTypeId'),"_id":$(this).attr('id'),"goodsName":$(this).attr('title'),"dependId":$(this).attr('gDepId')};
            build.choiceFacility(goodsGeo);
            $.fancybox.close();
            return false;
          });
          
        $container.imagesLoaded( function() {
            $container.masonry({
                itemSelector: '.goods',
                columnWidth: 80,
                cornerStampSelector: '.corner-stamp',
                isAnimated: true
                //isFitWidth: true,
                //isAnimated: !Modernizr.csstransitions
            });
        });
      
      $(window).scroll(function() {
      if($(this).scrollTop() > $(".m-head").height()) {
        $(".m-head").hide();
        $(".m-nav").addClass('fixed');
      } else {
        $(".m-head").show();
        $(".m-nav").removeClass('fixed');
      }
      });
     
      
    var $backToTopTxt = "返回顶部";
    var $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html,body").animate({ height: 300,scrollTop:100}, 120);
    });
    var $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 100)? $backToTopEle.show(): $backToTopEle.hide();
    };
    $(window).bind("scroll", $backToTopFun);
     
    });
</script>